<template>
  <div class="page-container">
    <el-card>
      <el-row
        :gutter="20"
        class="mb-2"
      >
        <el-col :span="6">
          <el-input
            v-model="search"
            placeholder="搜索单车编号/位置"
            clearable
            @clear="onSearch"
            @keyup.enter="onSearch"
          />
        </el-col>
        <el-col :span="4">
          <el-select
            v-model="statusFilter"
            placeholder="状态筛选"
            clearable
            @change="onSearch"
          >
            <el-option
              label="全部"
              value=""
            />
            <el-option
              label="可用"
              value="可用"
            />
            <el-option
              label="维修中"
              value="维修中"
            />
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-button
            type="primary"
            @click="showDialog = true"
          >
            新增单车
          </el-button>
        </el-col>
        <el-col :span="4">
          <el-button @click="exportBikes">
            导出数据
          </el-button>
        </el-col>
        <el-col :span="4">
          <el-button @click="showMap = true">
            地图定位
          </el-button>
        </el-col>
      </el-row>
      <el-table
        :data="filteredBikes"
        style="width: 100%"
        @selection-change="onSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          prop="id"
          label="编号"
          width="100"
        />
        <el-table-column
          prop="location"
          label="位置"
        />
        <el-table-column
          prop="status"
          label="状态"
        >
          <template #default="scope">
            <el-select
              v-model="scope.row.status"
              @change="onStatusChange(scope.row)"
            >
              <el-option
                label="可用"
                value="可用"
              />
              <el-option
                label="维修中"
                value="维修中"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              size="small"
              @click="editBike(scope.row)"
            >
              编辑
            </el-button>
            <el-button
              size="small"
              type="danger"
              @click="deleteBike(scope.row.id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row class="mt-2">
        <el-col :span="12">
          <el-button
            type="danger"
            :disabled="!multipleSelection.length"
            @click="batchDelete"
          >
            批量删除
          </el-button>
        </el-col>
        <el-col
          :span="12"
          style="text-align: right"
        >
          <el-pagination
            v-model:current-page="page"
            background
            layout="prev, pager, next"
            :total="filteredBikes.length"
            :page-size="5"
          />
        </el-col>
      </el-row>
    </el-card>
    <el-dialog
      v-model="showDialog"
      :title="editId ? '编辑单车' : '新增单车'"
    >
      <el-form :model="form">
        <el-form-item label="编号">
          <el-input v-model="form.id" />
        </el-form-item>
        <el-form-item label="位置">
          <el-input v-model="form.location" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="form.status">
            <el-option
              label="可用"
              value="可用"
            />
            <el-option
              label="维修中"
              value="维修中"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showDialog = false">
          取消
        </el-button>
        <el-button
          type="primary"
          @click="saveBike"
        >
          保存
        </el-button>
      </template>
    </el-dialog>
    <el-dialog
      v-model="showMap"
      title="单车地图定位"
    >
      <div style="height:300px;display:flex;align-items:center;justify-content:center;">
        [该功能还在开发中...]
      </div>
      <template #footer>
        <el-button @click="showMap = false">
          关闭
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
const bikes = ref([
  { id: 'B001', location: '教学楼A', status: '可用' },
  { id: 'B002', location: '图书馆', status: '维修中' },
  { id: 'B003', location: '宿舍区', status: '可用' }
])
const search = ref('')
const statusFilter = ref('')
const page = ref(1)
const showDialog = ref(false)
const showMap = ref(false)
const editId = ref('')
const form = ref({ id: '', location: '', status: '可用' })
const multipleSelection = ref([])
const filteredBikes = computed(() => {
  let data = bikes.value
  if (search.value) {
    data = data.filter(b => b.id.includes(search.value) || b.location.includes(search.value))
  }
  if (statusFilter.value) {
    data = data.filter(b => b.status === statusFilter.value)
  }
  const start = (page.value - 1) * 5
  return data.slice(start, start + 5)
})
function onSearch() { page.value = 1 }
function editBike(row: any) {
  editId.value = row.id
  form.value = { ...row }
  showDialog.value = true
}
function deleteBike(id: string) {
  bikes.value = bikes.value.filter(b => b.id !== id)
}
function saveBike() {
  if (editId.value) {
    const idx = bikes.value.findIndex(b => b.id === editId.value)
    if (idx > -1) bikes.value[idx] = { ...form.value }
  } else {
    bikes.value.push({ ...form.value })
  }
  showDialog.value = false
  editId.value = ''
  form.value = { id: '', location: '', status: '可用' }
}
function onSelectionChange(val: any) {
  multipleSelection.value = val
}
function batchDelete() {
  bikes.value = bikes.value.filter(b => !multipleSelection.value.includes(b))
  multipleSelection.value = []
}
function exportBikes() {
  const data = JSON.stringify(bikes.value, null, 2)
  const blob = new Blob([data], { type: 'application/json' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = 'bikes.json'
  a.click()
  URL.revokeObjectURL(url)
}
function onStatusChange(row: any) {
  // 可扩展为后端同步
}
</script>

<style scoped>
.page-container { padding: 24px; }
.mb-2 { margin-bottom: 16px; }
.mt-2 { margin-top: 16px; }
</style> 